import { dexieTheme, setingConfig } from '@/hooks/dexie'
import backColorList from '@/hooks/background'
const DThemeService = new dexieTheme()
const userSetings = new setingConfig()
export default {
  namespaced: true,
  state() {
    return {
      theme: {
        light:{background: "linear-gradient(to right, #EE9CA7,#FFDDE1)",fontColor: "#000000d9",fontCheckColor: "white", blurColor: "rgba(0,0,0,0.1)",blurValue: 0.1},
        drak:{background: "linear-gradient(to right, #116358,#00221e)",fontColor: "#dadde1",fontCheckColor: "#2fb4ff", blurColor: "rgba(0,0,0,0.1)",blurValue: 0.1}
      }, // 'linear-gradient(to right, #c9ffbf, #ffafbd)', // 背景主题
      diyThemes: [], // 用户自定义的主题列表
      isDrak: false, // 是否开启夜间模式
      userSeting: {}, // 用户当前配置
      defaultThemeList: [...backColorList] // 默认的主题列表
    }
  },
  getters: {
    defaultThemeList: (state: any) => {
      return state.defaultThemeList
    },
    appTheme: (state: any) => {
      return state.theme
    },
    isDrak: (state: any) => {
      return state.isDrak
    },
    diyThemes: (state: any) => {
      return state.diyThemes
    },
    userSeting: (state: any) => {
      return state.userSeting
    },
    // 获取用户当前选择的主题的id
    themeCheckId:(state: any) => {
      if(Object.keys(state.userSeting).length) return state.userSeting.activeThemeId
      return -1
    }
  },
  mutations: {
    setAppTheme(state: any, param: any) {
      state.theme = param
    },
    setIsDrak(state: any, param: boolean) {
      state.isDrak = param
    },
    setDiyThemes(state: any, param: any) {
      state.diyThemes = param
    },
    setUserSeting(state: any, param: any) {
      state.userSeting = param
    }
  },
  actions: {
    getDiyThemes({commit, getters}:any){
      DThemeService.selectAll().then((res:any) => {
        if(!res.length) return
        commit('setDiyThemes', res)
        if(Object.keys(getters['userSeting']).length){
         const ids = getters['themeCheckId'].split('default')
         if(ids.length > 1){
          commit('setAppTheme', { ...getters['defaultThemeList'][ids[1]], id: `default${ids[1]}`})
         }
        }
      })
    },
    getUserSeting({commit, getters}:any){
      userSetings.select().then((res:any) => {
        if(!res.length) return
        commit('setUserSeting', res[0])
         const ids = getters['themeCheckId'].split('default')
         if(ids.length > 1){
          commit('setAppTheme', { ...getters['defaultThemeList'][ids[1]], id: `default${ids[1]}`})
         }
      })
    },
    setUserSeting({commit, getters}:any){
      const param = {
        id: 0,
        activeThemeId: getters['appTheme'].id,
        isDrak: getters['isDrak']
      }
      debugger
      userSetings.save(param, 0).then((res:any) => {
        debugger
        commit('setUserSeting', {...param, id: res})
      })
    },
    // setAppTheme({commit}:any){

    // }
  }
}
